<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('工夹具全寿命智能管理系统')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){
        if(sessionStorage.jwt == null){
            self.location="login"
        }

        var data4Vue = {
            uri:'select',
            beans: [],
            usenum:'',
            num1:'',
            num2:'',
            num3:''
        };
        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.select();
            },
            methods: {
                select:function(){
                    var url =  this.uri+ "/"+this.usenum;
                    axios.get(url).then(function(response) {
                        vue.beans=response.data;
                    });
                },
//
            }
        });
        Vue.filter('formatDateFilter', function (value, formatString) {
            if(null==value)
                return "";
            formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
            return moment(value).format(formatString);
        });
    });

</script>

<div  class="page login-page" id="workingArea">


    <div class="container">

        <span>
            <span>  <h5>初级预警：</h5></span>
         <span><input type="text" class="form-control"style="width: 100px;" v-model="num1" placeholder="输入整数"></span>
        </span>
        <span>
            <span>  <h5>中级预警：</h5></span>
         <span><input type="text" class="form-control"style="width: 100px;" v-model="num2" placeholder="输入整数"></span>
        </span>
        <span>
            <span>  <h5>高级预警：</h5></span>
         <span><input type="text" class="form-control"style="width: 100px;" v-model="num3" placeholder="输入整数"></span>
        </span>

        <span style="padding-left: 150px">
            <span>  <h5>选择预警等级：</h5></span>
       <span> <select name="" id="" v-model="usenum" @click="select" class="form-control" style="width: 200px;">
            <option :value="num1">初级预警</option>
            <option :value="num2">中级预警</option>
            <option :value="num3">高级预警</option>
        </select>
           </span>
    </span>
        <table class="table table-dark table-hover" style="margin-top: 20px">
            <thead>
            <tr>
                <td>工夹具编号</td>
                <td>名称</td>
                <td>型号</td>
                <td>存放库位</td>
                <td>采购单号</td>
                <td>入库时间</td>
                <td>已使用次数</td>

            </tr>
            </thead>
            <tbody>
            <tr v-for="bean in beans">
                <td>{{bean.id}}</td>
                <td>{{bean.name}}</td>
                <td>{{bean.type}}</td>
                <td>{{bean.location}}</td>
                <td>{{bean.billno}}</td>
                <td>{{bean.regdate | formatDateFilter}}</td>
                <td>{{bean.usedCount}}</td>

            </tr>

            </tbody>
        </table>
    </div>




</div>



</body>
</html>
